<template>
  <div class="login-container">
      <a-row class="login-layout container">
        <a-col :span="24" :sm="24" :md="12">
          <div class="login-sider">
            <div class="login-sider-content">
              <h1 class="login-title">欢迎登录</h1>
              <p class="login-sub-title">ERP管理系统</p>
            </div>
          </div>
        </a-col>
        <a-col :span="24" :sm="24" :md="12">
          <div class="login-content">
            <div class="login-form-wrapper">
              <a-form :model="formState"
              :hideRequiredMark="true"
              :rules="rules"
              @finish="handleLogin">
                <a-form-item name="email">
                  <div class="input-wrapper">
                    <a-input
                    v-model:value="formState.email"
                    :bordered="false"
                    placeholder="邮箱"
                  />
                  </div>
                </a-form-item>
                <a-form-item name="password">
                  <div class="input-wrapper">
                    <a-input-password
                    :bordered="false"
                    v-model:value="formState.password"
                    placeholder="密码"
                  />
                  </div>
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" :loading="loading" class="login-btn" html-type="submit">登录</a-button>
                </a-form-item>
                <div class="extra-options">
                  <a-form-item  name="remember">
                    <label class="a-checkbox-wrapper">
                      <a-checkbox v-model:checked="formState.remember"
                        >记住密码</a-checkbox
                      >
                    </label>
                </a-form-item>
                <a-form-item  name="autoLogin">
                    <label class="a-checkbox-wrapper">
                      <a-checkbox v-model:checked="formState.autoLogin"
                        >自动登录</a-checkbox
                      >
                    </label>
                </a-form-item>
                </div>
              </a-form>
            </div>
          </div>
        </a-col>
      </a-row>
  </div>
</template>

<script setup>
import {useUserStore, useAuthStore} from '@/store/index.js';
import { ref } from "vue";
import {message} from 'ant-design-vue';
import api from "@/api";
import {getPermissions} from "@/api/role"
import {useRoute, useRouter} from "vue-router";
const router = useRouter();
let loading = ref(false);
const formState = ref({
  email: "admin",
  password: "admin",
  remember: false,
  autoLogin: false,
});
const userStore = useUserStore();
const authStore = useAuthStore();
const rules = {
  email: [
    {
      required: true,
      validator: (rule, value) => {
        if (value === '') {
          return Promise.reject('请输入邮箱');
        }
        if (value === 'admin') {
          return Promise.resolve();
        }
        // 邮箱reg
        const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!reg.test(value)) {
          return Promise.reject('邮箱格式不正确');
        }
        return Promise.resolve();
      }
    },
  ],
  password: [
    {
      required: true,
      validator: (rule, value) => {
        if (value === '') {
          return Promise.reject('请输入密码');
        }
        return Promise.resolve();
      }
    },
  ],
}
const handleLogin = (values) => {
  const hide = message.loading()
  loading.value = true;
  
  api.login(values).then(async (token) => {
    loading.value = false;
    authStore.setToken(token);
    
    const user = await api.getUserInfo()
    userStore.setUser({
      ...user
    })
    if(user.currentRole){
      const permissions = await getPermissions(user.currentRole.rid)
      authStore.setPermissions(permissions)
    }
    else{
      authStore.setPermissions([])
    }
    
    hide();
    message.success('登录成功');
    router.push('/');
  }).catch((err) => {
    hide();
    loading.value = false;
  });
};
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  display: flex;
  height: 100vh;
}
.login-container::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  background: url(@/assets/p_big3.jpg);
  background-size: cover;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
}
.login-layout {
  z-index: 999;
  padding: 20px;
  position: relative;
  margin: auto;
  /* display: flex; */
  height: 70vh;
  width: 1140px;
  max-width: 100%;
}

.login-sider {
  /* //#0959d9 */
  background: rgba(9, 89, 217, 0.8);
  display: flex;
  align-items: center;
  padding: 30px;
  width: 100%;
  height: 100%;
}

.login-sider-content {
  letter-spacing: 1px;
  color: #fff;
}

.login-title {
  margin-bottom: 12px;
  font-size: 2.5em;
  font-weight: 600;
}

.login-sub-title {
  font-size: 14px;
  font-weight: 300;
}

.login-content {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 30px;
  width: 100%;
  height: 100%;
}

.login-form-wrapper {
  width: 100%;
}

.extra-options {
  display: flex;
  align-items: center;
  justify-content:center;
}
.login-btn{
    width: 100%;
    height: 40px;
    margin-top: 10px;
}
.input-wrapper {
  border-bottom: 1px solid #e8e8e8
}
</style>
